<script setup>
import { RouterLink, RouterView } from "vue-router";
import { useAuthStore } from "@/stores/auth";
import { onMounted } from "vue";
const authStore = useAuthStore();
onMounted(() => {
  authStore.getUser();
});
</script>

<template>
  <header>
    <nav>
      <RouterLink :to="{ name: 'home' }" class="nav-link">首页</RouterLink>
      <div v-if="authStore.user" class="space-x-6 flex items-center">
        <p class="text-sm text-slate-300">
          欢迎回来, {{ authStore.user.name }}
        </p>
        <!-- <RouterLink :to="{ name: 'create-article' }" class="nav-link"
          >创建文章</RouterLink
        > -->
        <form @submit.prevent="authStore.logout" class="">
          <button class="nav-link">退出登录</button>
        </form>
      </div>
      <div v-else class="space-x-6">
        <RouterLink :to="{ name: 'register' }" class="nav-link"
          >注册</RouterLink
        >
        <RouterLink :to="{ name: 'login' }" class="nav-link">登录</RouterLink>
      </div>
    </nav>
  </header>

  <RouterView />
</template>

<style scoped></style>
